   <%@ include file="/WEB-INF/jsp/common.jsp"%>

 

<script type="text/javascript" src="js/app/common.js"></script>
      
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/css/ui.jqgrid.css" />
    <link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-3.8.2/src/css/ui.multiselect.css" />
 
    <script src=     "js/jqgrid/grid.locale-en.js"  type="text/javascript"></script>
    <script src=    "js/jqgrid/jquery.jqGrid.min.js"   type="text/javascript"></script>
    <script src=    "js/jqgrid/grid.formedit.js"    type="text/javascript"></script> 
    <script src=   "js/jqgrid/jquery.jqGrid.src.js"    type="text/javascript"></script>
     

<title>Students Config</title>


	 
<script   type="text/javascript">

 

 $(document).ready(function() { 
	 var e = document.getElementById("selectSection") 
	 var section = e.options[e.selectedIndex].value;
	 
	var editOk = true;
     $("#Requests").jqGrid({
         url : 'getStudents.htm?section='+section , 
         datatype: 'json',
         mtype: 'GET',
         caption: '',
         colNames: ['userid','First Name', 'Last Name','Email Address','Phone Number', 'Address' ],
         colModel: [
		 { name: 'userid', index: 'userid',editable:true,width:15,  hidden: true, viewable: false },
         { name: 'firstName', index: 'firstName', width: 80, resizable: true, hidden: false, viewable: true,editable:true,editoptions:{size:20} },
         { name: 'lastName', index: 'lastName', searchoptions: { sopt: ['cn'] }, width: 70,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
         { name: 'emailAddress', index: 'emailAddress', searchoptions: { sopt: ['cn'] }, width: 90,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
         { name: 'parentPhone', index: 'phone', searchoptions: { sopt: ['cn'] }, width: 80,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
         { name: 'Address', index: 'Address', searchoptions: { sopt: ['cn'] }, width: 80,   resizable: true, searchable: false ,editable:true,editoptions:{size:20}} ,
   
],

         loadtext: 'Loading..',
         multiselect: true,
         pager: $("#pager"),
         rowNum: 50,
         rownumbers: true,
         rowList: [10, 20, 50],
         sortname: 'firstName',
         sortorder: 'asc',
         viewrecords: true,
         height: 350,
         width: 900,
         imgpath: '../scripts/jqgrid/themes/basic/images',
         editurl : 'addEditStudent.htm',
         caption: "Students", 

     });
     var addOptions = { reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
    			 var e = document.getElementById("selectSection") 
    			 var section = e.options[e.selectedIndex].value;
    			 eparams.url = 'addEditStudent.htm' + "?section=" + section;   
			}};
     var deleteOptions = { reloadAfterSubmit:false, url : "deleteStudent.htm",
    		 onclickSubmit : function(eparams) { 
					var allUserIDs = "";
    			    var selectedrows = jQuery("#Requests").jqGrid('getGridParam', 'selarrrow'); 
    			    // we can use all the grid methods here
    			    //to obtain some data 
    			    for(var row in selectedrows)
    			    	{
    			        var userID = 	jQuery('#Requests').jqGrid('getCell',selectedrows[row],'userid');
    			        allUserIDs = allUserIDs + userID + ";" 
    			    	}
    			    eparams.url = eparams.url + "?userID= " + allUserIDs; 
    			}};
     var editOptions = {reloadAfterSubmit:false, 
    		 onclickSubmit : function(eparams) { 
					 
 			}};
     
     jQuery("#Requests").jqGrid('navGrid', '#pager', { add: true, view: true, del: true, edit: editOk },
    	     editOptions, // edit options
             addOptions , // add options
             deleteOptions, // del options
             {}, // search options
             {   // vew options
             beforeShowForm: function(form) {
              
             }
         });
 });

 function gradeSectionChanged(sel) {
 
	 $("#Requests").setGridParam(
             { 
                 url: 'getStudents.htm?section='+sel.value
             }
             ).trigger("reloadGrid")
 }

 function modifyList(){   
	 var ddl =  document.getElementById("selectSection");   
	 ddl.options.length = 0;
	 
	    $.post("getSections.htm", { standard: $('#selectStandard').val()}, function(data) {
	         var options = data.split(";");
			 var count = options.length;
	         for(var index =0 ; index < count ; index++)
	         { 
					var values = options[index].split(":");
					var text  = values[0];
					var value = values[1];
    			    var opt = document.createElement("option");
			        // Add an Option object to Drop Down/List Box
			        ddl.options.add(opt);
			        // Assign text and value to Option object
			        opt.text = text;
			        opt.value = value;
	         }
	    });
	}
		  </script> 
 
	 </head>

	 <body class="body-content-class">



	 <div id="wrapper" style="width: 1100px">
	 	<div id="banner">

	 <!-- include top common header links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/commonHeader.jsp"%>

	 <!-- include top navigation links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/navigationTop.jsp"%>

	 	</div>
	 	<div id="content-wrapper">
	 		<div id="content">
	 		<div class="content-top">
	 		</div>
	 		<div class="content">


	 <div class="content-body">
	 	<table cellspacing="0" cellpadding="0" class="layout-grid">
	 		<tr>
	 			<td>
	 <table class="layout-grid" cellspacing="0" cellpadding="0">
	 	<tr>
	 		 <td class="left-nav">
	 		
	 <!-- include  content navigation left links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/navigationContentLeft.jsp"%>
	 		
	 		</td>
	 		<td class="normal">
	 				<div id="demo-header">
	 							<h2>Students configuration</h2>
	 						</div>
	 						<div style="position: absolute; right: 27px" id="switcher"></div>
	 						<div id="demo-config">
	 							<div id="demo-frame-wrapper">
	 							<div id="demo-frame" style="height: 500px; width: 910px;">
	 							

	 <div class="demo-description" style="height: 300px">


	<form  id="add-teacher-form-id" name="add-teacher-form" modelAttribute="user"  >
	
   Select Standard :
 <form:select path="gradeList" onchange="modifyList();" id="selectStandard" >
    <form:option value="0" label="--- Select ---"/>
    <form:options items="${gradeList}" itemValue="entityId" itemLabel="gradeName"/>
 </form:select> 
 Select Section:
  <form:select path="gradeList" onchange="gradeSectionChanged(this);" id="selectSection" >
    <form:option value="0" label="--- Select ---"/>
    <form:options items="${sectionList}" itemValue="entityId" itemLabel="sectionName"/>
 </form:select> 
 
    <br /> <br />
   <table id="Requests"></table> 
    <div id="pager" ></div> 
   
 
</form>
  
	 </div><!-- End demo-description -->

	 								</div>									
	 							</div>

	 						 
	 						</div>
	 					

	 <div class="UIAPIPlugin" id="widget-docs">
	   

	   <div id="options">
	     <h2 class="top-header">Options</h2>
	     <ul class="options-list">
	       



	     </ul>
	   </div>
	   
	   <div id="methods">
	     <h2 class="top-header">Methods</h2>
	     <ul class="methods-list">
	     </ul>
	   </div>
	   <div id="theming">
	   </div>
	 </div>



	 		</td>
	 	</tr>
	 </table>


	 			</td>
	 		</tr>
	 	</table>
	 </div>
	 		</div>
	 		</div>
	 	</div>
	 	<div id="footer">
	 	
	 	<!-- include  footer content links/buttons,change accordingly -->

	 <%@ include file="/WEB-INF/jsp/footer.jsp"%>
	 	
	 	</div>
	 </div>
	 </body>

	 </html>
   